---
title: Tooltip
description: "`Tooltip`は、要素の補足など短い情報を表示するコンポーネントです。"
storybook: components-tooltip--basic
source: components/tooltip
style: components/tooltip/tooltip.style.ts
---

```tsx preview
<Tooltip content="へっ！きたねぇ花火だ">
  <Button>Please Hover</Button>
</Tooltip>
```

## 使い方

:::code-group

```tsx [package]
import { Tooltip } from "@yamada-ui/react"
```

```tsx [alias]
import { Tooltip } from "@/components/ui"
```

```tsx [monorepo]
import { Tooltip } from "@workspaces/ui"
```

:::

```tsx
<Tooltip />
```

### 表示位置を変更する

表示位置を変更する場合は、`placement`に`"end"`や`"center-start"`などを設定します。デフォルトでは、`"start"`が設定されています。

```tsx preview
<VStack>
  <For
    each={[
      "start",
      "start-start",
      "start-end",
      "start-center",
      "end",
      "end-start",
      "end-end",
      "end-center",
      "center-start",
      "center-end",
    ]}
  >
    {(placement, index) => (
      <Tooltip key={index} content="へっ！きたねぇ花火だ" placement={placement}>
        <Button minW="xs" w="fit-content">
          Open "{toTitleCase(placement)}" Tooltip
        </Button>
      </Tooltip>
    )}
  </For>
</VStack>
```

### アニメーションを変更する

表示または非表示のアニメーションを変更する場合は、`animationScheme`に`"top"`や`"left"`などを設定します。デフォルトでは、`"scale"`が設定されています。

```tsx preview
<VStack>
  <For
    each={["scale", "block-end", "inline-start", "inline-end", "block-start"]}
  >
    {(animationScheme, index) => (
      <Tooltip
        key={index}
        animationScheme={animationScheme}
        content="へっ！きたねぇ花火だ"
      >
        <Button minW="xs" w="fit-content">
          Open "{animationScheme}" Tooltip
        </Button>
      </Tooltip>
    )}
  </For>
</VStack>
```

### 所要時間を変更する

所要時間を変更する場合は、`duration`に数値(秒)を設定します。

```tsx preview
<Tooltip content="へっ！きたねぇ花火だ" duration={0.7}>
  <Button>Please Hover</Button>
</Tooltip>
```

### オフセットを変更する

オフセットを変更する場合は、`gutter`または`offset`に値を設定します。

`gutter`は、単純な要素との差を設定でき、`offset`は、`[横軸, 縦軸]`を設定できます。

```tsx preview
<VStack>
  <Tooltip content="へっ！きたねぇ花火だ" gutter={32}>
    <Button w="fit-content">Please Hover</Button>
  </Tooltip>

  <Tooltip content="へっ！きたねぇ花火だ" offset={[16, 16]}>
    <Button w="fit-content">Please Hover</Button>
  </Tooltip>
</VStack>
```

### 遅延させる

表示または非表示を遅延させる場合は、`openDelay`または`closeDelay`に数値(ミリ秒)を設定します。

```tsx preview
<Tooltip
  content="へっ！きたねぇ花火だ"
  placement="top"
  openDelay={500}
  closeDelay={500}
>
  <Button>Delay Open and Close 500ms</Button>
</Tooltip>
```

### 無効にする

ツールチップを無効にする場合は、`disabled`を`true`に設定します。

```tsx preview
<Tooltip content="へっ！きたねぇ花火だ" disabled>
  <Button>Please Hover</Button>
</Tooltip>
```

### 常に表示する

ツールチップを常に表示する場合は、`open`を`true`に設定します。

```tsx preview
<Tooltip content="へっ！きたねぇ花火だ" open>
  <Button>Please Hover</Button>
</Tooltip>
```

## Props

<PropsTable name="tooltip" />

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。
